<template>
	<div class="recommend-wrapper">
		<van-sidebar>
			<van-sidebar-item title="编辑推荐" />
		</van-sidebar>
		<van-grid :center="false" :column-num="3">
			<van-grid-item
				v-for="item in playList"
				:key="item.id"
				class="item"
                @click="go(item.id)"
			>
				<van-image :src="item.coverImgUrl" />
				<div class="text">{{ item.name }}</div>
				<div class="play-count">
					<van-icon name="service-o" />
					{{ (item.playCount / 10000).toFixed(1) }}万
				</div>
			</van-grid-item>
		</van-grid>
		<div>
			<van-sidebar>
				<van-sidebar-item title="最新音乐" />
			</van-sidebar>
            <song-list :list="newSongList" />
		</div>
	</div>
</template>
<script>
import eventBus from '@/event-bus';
export default {
  computed: {
    playList () {
      return eventBus.playList;
    },
    newSongList () {
      return eventBus.newSongList.map(item => ({
        id: item.id,
        name: item.name, // 歌曲名
        maxBr: item.song.privilege.downloadMaxbr, // 最大音质
        alias: item.song.alias[0], // 别名
        artists: item.song.artists, // 歌手数组
        albumName: item.song.album.name, // 专辑名
      }));
    },
  },
  created () {
    eventBus.$emit('updatePlayList');
    eventBus.$emit('updateNewSongList');
  },
  methods: {
      go(id) {
          this.$router.push({
              name: '/song-information',
              query: { id },
          })
      }
  }
}
</script>
<style scoped>
.recommend-wrapper {
	overflow-y: auto;
	width: 100%;
	color: #333;
}
.item {
	position: relative;
}
.play-count {
	position: absolute;
	top: 8px;
	right: 8px;
	color: #fff;
	font-size: 12px;
    text-shadow: 0px 0px 1px #000;
}
.text {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 4px;
  font-size: 15px;
}
</style>